
import React,{Fragment} from 'react';
import store from "./store";
import {Row,Col,Button,Card,Icon,Tooltip,Modal,Message,Alert} from 'antd'
import { observer } from 'mobx-react';
import styles from "./index.module.css";
import AddModuleForm from "./AddModuleForm";
import AddPageForm from "./AddPageForm";
import AddZoneForm from "./AddZoneForm";
import {Delete, DeleteZone, GeneratePermission} from "../../../../api/work/system/RuleApi";

@observer
class Index extends React.Component{
    constructor(props) {
        super(props);
        this.state = {}
    }
    componentDidMount() {
        store.fetchRecords();
    }

    showAddPageForm = (pid) => {
        store.pid = pid;
        store.addPageVisible = true;
    };

    showAddZoneForm = (id) => {
        store.id = id;
        store.addZoneVisible = true;
    };

    handleDelete = (id) => {
        Modal.confirm({
            icon: 'exclamation-circle',
            title: '确定要删除吗？',
            onOk: () => {
                Delete({id:id}).then(response => {
                    if (response.data.code === 200){
                        store.fetchRecords();
                        Message.success(response.data.msg);
                    }
                })
            },
        })
    };

    handleDeleteZone = (key,id) => {
        Modal.confirm({
            icon: 'exclamation-circle',
            title: '确定要删除该功能吗？',
            onOk: () => {
                DeleteZone({key:key,id:id}).then(response => {
                    if (response.data.code === 200){
                        store.fetchRecords();
                        Message.success(response.data.msg);
                    }
                })
            },
        })
    };

    handleGeneratePermission = () => {
        store.loading = true;
        GeneratePermission({}).then(response => {
            if (response.data.code === 200){
                Message.success(response.data.msg)
            }
        }).finally(() => {store.loading = false})
    };

    render() {
        return (
           <Fragment>
               <Card>
                   <Button className={styles.plus_button} type="primary" icon="plus" onClick={() => store.addModuleVisible = true}>添加模块</Button>

                   <Button loading={store.loading} className={styles.save_button} type="primary" icon="save" onClick={() => this.handleGeneratePermission()}>生成权限</Button>

                   <Alert closable showIcon type={"info"} message={"小提示"}
                          style={{width: 750,marginBottom:"10px", color: '#31708f !important'}}
                          description={"配置自定义页面功能开发后的权限配置以及生成权限列表"}
                   />

                   <table border="1" className={styles.table}>
                       <thead>
                       <tr>
                           <th>模块</th>
                           <th>页面</th>
                           <th>功能</th>
                       </tr>
                       </thead>
                       <tbody>
                           {store.records.length > 0 && store.records.map(mod => {
                               if (mod.hasOwnProperty("pages")){
                                  return  mod.pages.map((page, index) => (
                                       <Fragment key={page.key}>
                                           <tr>
                                               {index === 0 && <td rowSpan={mod.pages.length}>{mod.label} {mod.is_edit === true ?
                                                   <Fragment>
                                                       <Tooltip placement="right" title={"新增页面"}>
                                                           <Icon type="plus-square" theme="twoTone" onClick={(e) => this.showAddPageForm(mod.id) } />
                                                       </Tooltip>
                                                       <Tooltip className={styles.tip_sty} placement="right" title={"编辑模块"}  onClick={(e) => {store.record=mod;store.addModuleVisible=true}}>
                                                           <Icon type="edit" theme="twoTone" />
                                                       </Tooltip>
                                                       <Tooltip className={styles.tip_sty} placement="right" title={"删除模块"}>
                                                           <Icon type="delete" theme="twoTone" onClick={(e) => this.handleDelete(mod.id)} />
                                                       </Tooltip>
                                                   </Fragment>
                                                   : ""}
                                               </td>}
                                               <td>
                                                   {page.label} {mod.is_edit === true ?
                                                   <Fragment>
                                                       <Tooltip placement="right" title={"新增功能"}>
                                                           <Icon type="plus-square" theme="twoTone" onClick={(e) => this.showAddZoneForm(page.id)} />
                                                       </Tooltip>
                                                       <Tooltip className={styles.tip_sty} placement="right" title={"编辑页面"}>
                                                           <Icon type="edit" theme="twoTone"  onClick={(e) => {store.record=page;store.addPageVisible=true}}/>
                                                       </Tooltip>
                                                       <Tooltip className={styles.tip_sty} placement="right" title={"删除页面"}>
                                                           <Icon type="delete" theme="twoTone" onClick={(e) => this.handleDelete(page.id)} />
                                                       </Tooltip>
                                                   </Fragment>

                                                   : ""}
                                               </td>
                                               <td>
                                                   <Row>
                                                       {Array.isArray(page.perms) && page.perms.map(perm => (
                                                           <Col key={perm.key} span={8}>
                                                               {perm.label} {mod.is_edit === true ?
                                                               <Tooltip className={styles.tip_sty} placement="right" title={"删除此功能"}>
                                                                   <Icon type="delete" theme="twoTone" onClick={(e) => this.handleDeleteZone(perm.key,page.id)} />
                                                               </Tooltip>
                                                               : ""}
                                                           </Col>
                                                       ))}
                                                   </Row>
                                               </td>
                                           </tr>
                                       </Fragment>
                                   ))
                               }else {
                                   return  <tr key={mod.key}>
                                       <td >{mod.label} {mod.is_edit === true ?
                                           <Fragment>
                                               <Tooltip placement="right" title={"新增页面"}>
                                                   <Icon type="plus-square" theme="twoTone" onClick={(e) => this.showAddPageForm(mod.id) } />
                                               </Tooltip>
                                               <Tooltip className={styles.tip_sty} placement="right" title={"编辑模块"}>
                                                   <Icon type="edit" theme="twoTone" onClick={(e) => {store.record=mod;store.addModuleVisible=true}}/>
                                               </Tooltip>
                                               <Tooltip className={styles.tip_sty} placement="right" title={"删除模块"}>
                                                   <Icon type="delete" theme="twoTone" onClick={(e) => this.handleDelete(mod.id)} />
                                               </Tooltip>
                                           </Fragment>
                                           : ""}
                                       </td>
                                   </tr>
                               }
                           })}
                       </tbody>
                   </table>
               </Card>
               {store.addModuleVisible && <AddModuleForm />}
               {store.addPageVisible && <AddPageForm />}
               {store.addZoneVisible && <AddZoneForm />}
           </Fragment>
        )
    }
}

export default Index;
